<template>
  <div class="main">
    <van-nav-bar title="患者详情" left-text="返回" left-arrow   @click-left="onClickLeft">
    </van-nav-bar>
    <van-cell style="background-color: #3399ff;border-radius:10px" border="true">
      <!-- 使用 title 插槽来自定义标题 -->
      <div style="background-color: white;border-radius:10px" class="padding-box" >
      <div >
        <span class="text-overstriking">王天辰</span>
        <div style="float: right">
          <van-icon  class="text-gray-word" size="7"  name="exchange"></van-icon><span class="text-gray-word" style="text-align: right;">更换就诊人</span>
        </div>
      </div>

        <div class="text-gray-word">
          居民身份证:32110204894844
        </div>
      </div>
    </van-cell>
    <van-cell style="margin-top:10px;height:60px;background-color:gainsboro;font-size: 22px;"
              class="text-overstriking flex"><span style="margin-left:10px;">挂号信息</span></van-cell>
      <van-field label="就趁日期" value="王天辰"  />
      <van-field label="就诊医院" value="超级无敌"  />
      <van-field label="就诊科室" value="外科"  />
      <van-field label="医生职称" value="主治医师"  />
      <van-field label="医事服务费" value="30元"  />
    <van-cell>
      <van-icon name="question-o"></van-icon><span>具体收费标准以当天为准，造成不便请谅解</span>
    </van-cell>
    <van-cell style="margin-top:10px;height:60px;background-color:gainsboro;font-size: 22px;"
              class="text-overstriking flex"><span style="margin-left:10px;">就诊人信息</span></van-cell>
    <van-field label="院内就诊卡" value="王天辰"  placeholder="如果曾在本院就诊，请填写"  />
    <van-field label="就诊手机号" value="132129848441"  />
    <van-field
      v-model="sms"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <van-button size="small" type="primary">发送验证码</van-button>
      </template>
    </van-field>
    <div style="text-align: center"><van-button type="primary">确认挂号</van-button></div>
  </div>
</template>

<script>

export default {
  name: 'PatientDetail',
  components: {},
  props: [],
  data () {
    return {}
  },
  computed: {},
  created () {
  },
  mounted () {
  },
  watch: {},
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang='less'>
.align-left {
  text-align: left;
}

</style>
